<template>
    <div class="views">
      <div class="header">
        {{headName}}
      </div>
      <div class="content">
        <router-view class="contentview" keep-alive></router-view>
      </div>
      <div class="footer">
        <ul>
          <li v-for="(item,index) in lists" :key="index" @click="barListClick(index)" class="footerLi">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      headName: "首页",
      lists: [
        { name: "新闻", path: "news" },
        { name: "日记", path: "diary" }
        // { name: "足迹", path: "footprint" }
        // { name: "我的", path: "home" }
      ]
    };
  },
  created: function() {
    var self = this;
  },
  beforeDestroy: function() {},
  methods: {
    fetchData() {
      var self = this;
      var paths = this.$route.path.split("/");
      var oneStr = paths[1];
      console.log(oneStr);
      if (oneStr == "diary") {
        self.headName = "日记列表";
      } else if (oneStr == "news") {
        self.headName = "首页";
      } else if (oneStr == "footprint") {
        self.headName = "足迹";
      } else if (oneStr == "home") {
        self.headName = "详情";
      } else if (oneStr == "addDiary") {
        self.headName = "添加日记";
      } else if (oneStr == "lookNews") {
        self.headName = "新闻详情";
      } else if (oneStr == "lookFootprint") {
        self.headName = "足迹详情";
      } else if (oneStr == "note") {
        self.headName = "笔记";
      } else if (oneStr == "lookNote") {
        self.headName = "笔记详情";
      }
    },
    barListClick(index) {
      this.$router.push({
        path: this.lists[index].path
      });
    },
    ...mapActions([])
  },
  // 监视
  watch: {
    $route: "fetchData"
  }
};
</script>
<style>
.footer ul {
  display: flex;
  flex-wrap: nowrap;
}
.footerLi {
  width: 50%;
  text-align: center;
  line-height: 4rem;
  font-size: 1.024rem;
  color: #000;
}
.header {
  height: 4rem;
  width: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 4rem;
}
.content {
  position: absolute;
  top: 4rem;
  left: 0;
  height: calc(100vh - 8rem);
  width: 100%;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}
.contentview {
  width: 100%;
  height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4rem;
  width: 100%;
  background-color: #fff;
}
.views {
  background-color: #f7f7f7 !important;
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
  position: relative;
}
</style>